<template>
	<view class="ranking-container">
		<view class="title">资产记录</view>
		<view class="content">
			<!-- 	<uv-row customStyle="margin-bottom: 10px" class="cus-row">
			
			</uv-row> -->
			<uv-cell-group v-for="(item, index) in planList" :key="index">
				<view class="title">
					<uv-cell icon="" :title="item.productType" value="查看" :border="false" :isLink="true"
						arrow-direction="right" @click="navigateToPlan(item)"></uv-cell>

				</view>
				<uv-cell center title="产品类型：" :value="item.productType" />
				<uv-cell center title="查看更多：" class="cus-cell">

					<template v-slot:value>

						<text class="iconfont icon-yk_yuanquan_fill"
							style="color: #41d068;font-size: 20rpx;margin-right: 6rpx;"></text>

						<uv-icon style="margin-left: 10rpx;font-size: 34rpx;" name="arrow-down" data-type="open"
							v-if="!showPlanCollapse[index]" @click="handlePlanCollapse(index)" />
						<uv-icon style="margin-left: 10rpx;font-size: 34rpx;" name="arrow-up" data-type="close"
							v-if="showPlanCollapse[index]" @click="handlePlanCollapse(index)" />
					</template>

				</uv-cell>


				<!-- 
				 <uv-cell title="产品类型" v-if="showPlanCollapse[index]" :value="item.productType" /> -->
				<uv-cell title="选择指标" v-if="showPlanCollapse[index]" :value="item.selectedIndicator" />
				<uv-cell title="本次用途" v-if="showPlanCollapse[index]" :value="item.currentUsage" />
				<uv-cell title="单位计量" v-if="showPlanCollapse[index]" :value="item.unitMeasurement" />
				<uv-cell title="本次用途类型" v-if="showPlanCollapse[index]" :value="item.currentUsageType" />
				<uv-cell title="用途" v-if="showPlanCollapse[index]" :value="item.usage" />
				<uv-cell title="状态" v-if="showPlanCollapse[index]" :value="item.status" />
				<uv-cell title="有效期" v-if="showPlanCollapse[index]" :value="item.validityPeriod" />
				<uv-cell title="交易人" v-if="showPlanCollapse[index]" :value="item.trader" />
				<uv-cell title="交易时间" v-if="showPlanCollapse[index]" :value="item.transactionTime" />
				<uv-cell title="总人数" v-if="showPlanCollapse[index]" :value="item.totalPeople" />
				<uv-cell title="交易时间" v-if="showPlanCollapse[index]" :value="item.transactionTime2" />
			</uv-cell-group>

		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue'
	import {
		reqHourRanking
	} from "@/api/model/photovoltaic"
	const planList = ref([{
			productType: "类型A",
			selectedIndicator: "指标1",
			currentUsage: "用途1",
			unitMeasurement: "单位1",
			currentUsageType: "用途类型1",
			usage: "用途描述1",
			status: "有效",
			validityPeriod: "2023-12-31",
			trader: "交易人1",
			transactionTime: "2023-10-01 10:00",
			totalPeople: 5,
			transactionTime2: "2023-10-01 10:00"
		},
		{
			productType: "类型B",
			selectedIndicator: "指标2",
			currentUsage: "用途2",
			unitMeasurement: "单位2",
			currentUsageType: "用途类型2",
			usage: "用途描述2",
			status: "无效",
			validityPeriod: "2023-11-30",
			trader: "交易人2",
			transactionTime: "2023-10-02 14:00",
			totalPeople: 3,
			transactionTime2: "2023-10-02 14:00"
		},
	])
	const showPlanCollapse = ref([])
	const handlePlanCollapse = (index) => {
		console.log("index==计划", index)
		showPlanCollapse.value[index] = !showPlanCollapse.value[index]; // 切换展开状态
	}

	onMounted(() => {
		// getData()
	})
</script>

<style lang="scss" scoped>
	.ranking-container {
		width: 100%;
		border-radius: 10px;
		background-color: #ffffff;
		margin: 20rpx 0;
		padding-bottom: 20rpx;

		.title {
			height: 76rpx;
			margin-left: 46rpx;
			font-size: 28rpx;
			font-family: PingFangSC-Semibold, PingFang SC;
			font-weight: 600;
			color: #333333;
			line-height: 76rpx;
		}

		.content {
			.uv-cell-group {
				padding: 0 0 10px 0;
				// background: #fafafa;
			}

			.cus-row {
				.demo-layout {
					background-color: #f4f6f8;
					height: 80rpx;
					line-height: 80rpx;
					font-size: 30rpx;
					font-weight: 500;

				}

				.demo-col {
					height: 80rpx;
					line-height: 80rpx;
					border-bottom: 1px solid #eceef5;
				}
			}
		}
	}
</style>